<template>
	<view class="login-page">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="库存搜索" @clickLeft="back"/>
		<view class="login-warp">
			<form class="form-warp">
				<view class="input-group searchInput" style="display: flex;position: relative;">
					<input @focus="searchFocus()" @blur="searchBlur()" @input="searchChange" :class="idSearchFocus ? 'searchFocus': ''" style="width: 88%;margin: 0 auto;padding: 0 !important;" v-model="materialName" name="materialName" placeholder="输入想要搜索的物料名称" />
					<image @click="closeOrSearch()" :class="idSearchFocus ? 'searchClose':'searchIcon'" :src="searchIcon" mode=""></image>
					<view v-if="searchList.length > 0" class="searchDown">
						<view @click="searchItemClick(item)" v-for="(item,index) in searchList" class="searchDownItem">{{item.fgoodname}}</view>
					</view>
				</view>
			</form>
		</view>
		<scroll-view scroll-y class="scroll-content" style="height: calc(100% - 149px);overflow-y: automarginTop: 0px" >
			<view v-if="dataList.length > 0" class="tableshadow" style="width: 100%;">
				<view class="dateSty">{{sysInfo.buildingName}}-{{sysInfo.labName}}</view>
				<scroll-view scroll-x scroll-y class="scroll-content scroll" @touchmove.stop>
					<uni-table style="margin-top: 4px" emptyText="暂无更多数据">
							<!-- 表格数据行 -->
							<uni-tr class="tableHead" v-for="(item,index) in dataListName" :key="'dataListName'+index">
								<uni-td>
									<span>{{item.demo1}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo2}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo3}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo4}}</span>	
								</uni-td>
							</uni-tr>
							<uni-tr :class="item.color == 'red' ? 'redColor': '' " v-for="(item,index) in dataList" :key="index">
								<uni-td>
									<span>{{item.fcabname}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.fequipmenttag}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.fprocdate}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.rukudateStr}}</span>	
								</uni-td>
							</uni-tr>
					</uni-table>
				</scroll-view>
			</view>	
			<view v-if="dataList.length == 0" style="font-size: 18px;color: #113A62;opacity: 0.65;width: 100%;text-align: center;padding-top: 50px;">
				暂无数据
			</view>
		</scroll-view>
	</view>
		
</template>

<script>
	import moment from '../../utils/moment.min.js'
	var that;
	export default {
		data() {
			return {
				sysInfo: null, // 系统变量
				searchIcon: '../../static/image/search.png',
				idSearchFocus: false, // 搜索框获取焦点
				materialName: '', // 物料名称
				dataListName: [] ,// 数据头
				dataList: [] ,// 数据
				searchList: [] // 搜索框数据
			}
		},
		onLoad(e) {
			that = this
			that.sysInfo = this.$sys.getSysInfo();
			that.dataListName = [
				{demo1:'柜子编号',demo2:'仓号',demo3:'有效期',demo4:'入库日期'},
			]
		},
		methods: {
			// 搜索框获取焦点
			searchFocus(){
				that.idSearchFocus = true
				that.searchIcon = '../../static/image/searchClose.png'
			},
			// 搜索框失去焦点
			searchBlur(){
			},
			// 搜索
			searchChange(value){
				if(value.detail.value){
					that.$http.get('material/goodInfo/list', {
						fsiteNo: that.sysInfo.fsiteNo,
						fgoodname: value.detail.value
					}).then(e => {
						that.searchList = e.list
					}).catch(()=>{
						that.searchList = []
					})
				}
			},
			// 点击所选
			searchItemClick(item){
				that.materialName = item.fgoodname
				that.searchIcon = '../../static/image/search.png'
				that.idSearchFocus = false
				that.searchList = []
				
				
				that.$http.get('material/warehouseInv/getWarehouseInvList5', {
					fsiteNo: that.sysInfo.fsiteNo,
					fgoodname: item.fgoodname,
					fpointNo: that.sysInfo.labNo
				}).then(e => {
					console.log('e333',e.list)
					that.dataList = e.list
				}).catch(()=>{
					that.dataList = []
				})
			},
			closeOrSearch(){
				if(that.searchIcon == '../../static/image/searchClose.png'){
					that.searchIcon = '../../static/image/search.png'
					that.materialName = ''
					that.idSearchFocus = false
					that.searchList = []
				}
			},
			parserDate(date) {
			  var t = Date.parse(date)
			  if (!isNaN(t)) {
				return new Date(Date.parse(date.replace(/-/g, '/')))
			  }
			},
			search(){
				
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	@import url("inventorySearch.css");
	.dateSty{
		/* Subtitle */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
		height: 30px;
		line-height: 30px;
		color: #113A62;
		opacity: 0.65;
		margin-left: 12px;
	}
	.title{
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		/* identical to box height, or 150% */
		color: #113A62;
		width: 100%;
		text-align: center;
		padding: 3px 0 12px 0;
	}
	.scroll {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
		}
		.scroll-box {
			padding: 24rpx;
			display: inline-block;
			width: 300rpx;
			height: 172rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			box-shadow: 0px 0px 4rpx 0px #ACACAC;
			border-radius: 8rpx;
			border: 1rpx solid #ACACAC;
		}
	
		.scroll-box:last-child {
			margin-right: 0;
		}
</style>
